import React, { useState, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { NavBar, SideBar } from 'antd-mobile';
import './xzfw.css'
import { ReceivePaymentOutline, RightOutline } from 'antd-mobile-icons'
import { RefundO, Exchange } from '@react-vant/icons';

const Xzfw = () => {
    const navigate = useNavigate();
    //本地存储获取商品
    const [list, setlist] = useState([]);
    useEffect(() => {
        const imgs = localStorage.getItem('item')
        setlist(JSON.parse(imgs))
    }, [])
    return (
        <div style={{ background: '#f2f2f2', width: "100%", height: "100vh" }}>
            <NavBar onBack={() => navigate(-1)} className='qbfl-nav' style={{ background: '#fff' }}>选择服务</NavBar>
            <div className='xzfw-div'>
                <img src={list.img} alt="" className='wlgz-img' />
                <div>
                    <p className='xzfw-p'>{list.name}</p>
                    <p className='xzfw-p1'>{list.name}</p>
                </div>
            </div>
            <div className='xzfw-div1'>
                <div className='xzfw-div2' onClick={()=>navigate('/sqtk')}>
                    <ReceivePaymentOutline className='xzfw-icon' />
                    <div className='xzfw-div3'>
                        <p>仅退款</p>
                        <p className='xzfw-p2'>未收到货（包含未签收），或与卖家协商同意前提下</p>
                    </div>
                    <RightOutline className='xzfw-icon1' />
                </div>
                <div className='xzfw-div2'>
                    <RefundO className='xzfw-icon' />
                    <div className='xzfw-div3' style={{marginRight:"1.3rem"}}>
                        <p>退货退款</p>
                        <p className='xzfw-p2'>已收到货，需要退货已收到的货物</p>
                    </div>
                    <RightOutline className='xzfw-icon1' />
                </div>
                <div className='xzfw-div2' style={{ border: '0' }}>
                    <Exchange className='xzfw-icon' />
                    <div className='xzfw-div3' style={{marginRight:"0.7rem"}}>
                        <p>换货</p>
                        <p className='xzfw-p2'>商品质量存在问题，联系卖家协商换货</p>
                    </div>
                    <RightOutline className='xzfw-icon1' />
                </div>
            </div>
        </div>
    )
}
export default Xzfw;